<template>
    <view class="bbll">
        <lsj-upload
        	ref="lsjUpload"
        	childId="upload1"
        	:width="width"
        	:height="height"
        	:option="option"
        	:size="size"
        	:formats="formats"
        	:debug="debug"
        	:instantly="instantly"
        	@uploadEnd="onuploadEnd"
        	@progress="onprogre"
        	@change="onChange">
                <view class="btn" >选择文件上传</view>
                <view class="tips">请上传道具清单</view>
                
                <view class="padding">
                       <view v-for="(item,index) in files.values()" :key="index">
                            <image style="width: 100rpx;height: 100rpx;" :src="item.path" mode="widthFix"></image>
                            <text>提示：【path主要用于图片视频类文件回显，他用自行处理】：{{item.path}}</text>
                            <text>{{item.name}}</text>
                            <text style="margin-left: 10rpx;">大小：{{item.size}}</text>
                            <text style="margin-left: 10rpx;">状态：{{item.type}}</text>
                            <text style="margin-left: 10rpx;">进度：{{item.progress}}</text>
                            <text style="margin-left: 10rpx;" v-if="item.responseText">服务端返回演示：{{item.responseText}}</text>
                            <text @click="resetUpload(item.name)" v-if="item.type=='fail'" style="margin-left: 10rpx;padding: 0 10rpx;border: 1rpx solid #007AFF;">重新上传</text>
                            <text @click="clear(item.name)" style="margin-left: 10rpx;padding: 0 10rpx;border: 1rpx solid #007AFF;">删除</text>
                        </view>
                </view>
        </lsj-upload>
    </view>
</template>

<script>
    export default {
    	data() {
    		return {
    			// 上传接口参数
    			option: {
    				// 上传服务器地址，需要替换为你的接口地址
    				url: 'http://hl.j56.com/dropbox/document/upload', // 该地址非真实路径，需替换为你项目自己的接口地址
    				// 上传附件的key
    				name: 'file',
    				// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
    				header: {
    					// 示例参数可删除
    					'Authorization': 'bearer eyJhbGciOiJSUzI1NiIsI',
    					'uid': '99',
    					'client': 'app',
    					'accountid': 'DP',
    				},
    				// 根据你接口需求自定义body参数
    				formData: {
    					// 'orderId': 1000
    				}
    			},
    			// 选择文件后是否立即自动上传，true=选择后立即上传
    			instantly: true,
    			// 必传宽高且宽高应与slot宽高保持一致
    			width: '180rpx',
    			height: '180rpx',
    			// 限制允许上传的格式，空串=不限制，默认为空
    			formats: '',
    			// 文件上传大小限制
    			size: 30,
    			// 文件数量限制
    			count: 2,
    			// 文件回显列表
    			files: new Map(),
    			// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
    			wxFiles: [],
    			// 是否打印日志
    			debug: true,
    			
    			
    			// 演示用
    			tabIndex: 0,
    			list:[], 
    		}
    	},
    	onReady() {
    		setTimeout(()=>{
    			console.log('----演示动态更新参数-----');
    			this.$refs['lsjUpload'+this.tabIndex].setData('formData.orderId','动态设置的参数'); 
    			
    			console.log('以下注释内容为-动态更新参数更多演示，放开后可查看演示效果');
    			// 修改option对象的name属性
    			// this.$refs.lsjUpload.setData('name','myFile');
    			
    			// 修改option对象的formData内的属性
    			// this.$refs.lsjUpload.setData('formData.appid','1111');
    			
    			// 替换option对象的formData
    			// this.$refs.lsjUpload.setData('formData',{appid:'222'});
    			
    			// option对象的formData新增属性
    			// this.$refs.lsjUpload.setData('formData.newkey','新插入到formData的属性');
    			
    			
    			// ---------演示初始化值，用于已提交后再次编辑时需带入已上传文件-------
    			// 方式1=传入数组
    			// let files1 = [{name: '1.png'},{name: '2.png',}];
    			
    			// 方式2=传入Map对象
    			// let files2 = new Map();
    			// files2.set('1.png',{name: '1.png'})
    			
    			// 此处调用setFiles设置初始files
    			// this.$refs.lsjUpload.setFiles(files1);
    			
    			// 初始化tab
    			this.onTab(0);
    		},2000)
    	},
        onLoad(){
            this.option.url = this.$api.postURL+'prop/importexcel'
            this.option.header =  {'Authorization':uni.getStorageSync('nangtong_login_token')}
        },
    	methods: {
    		// 某文件上传结束回调(成功失败都回调)
    		onuploadEnd(item) {
    			
    			
    			// 更新当前窗口状态变化的文件
    			this.files.set(item.name,item);
    			
    			// ---可删除--演示上传完成后取服务端数据
    			if (item['responseText']) {
    				console.log('演示服务器返回的字符串JSON转Object对象');
    				this.files.get(item.name).responseText = JSON.parse(item.responseText);
    			}
    			
    	
    			
    			// 强制更新视图
    			this.$forceUpdate();
    			
    			
    			// ---可删除--演示判断是否所有文件均已上传成功
    			let isAll = [...this.files.values()].find(item=>item.type!=='success');
    			if (!isAll) {
    				console.log('已全部上传完毕');
    			}
    			else {
    				console.log(isAll.name+'待上传');
    			}
                uni.hideLoading()
                setTimeout(function(){
                    uni.switchTab({
                        url:'/pages/yuangong/order'
                    })
                },1000)
    			
    		},
    		// 上传进度回调,如果网页上md文档没有渲染出事件名称onprogre，请复制代码的小伙伴自行添加上哈，没有哪个事件是只(item)的
    		onprogre(item) {
    			// 更新当前状态变化的文件
    			this.files.set(item.name,item);
    			
    			console.log('打印对象',JSON.stringify(this.files.get(item.name)));
    		
    			
    			// 强制更新视图
    			this.$forceUpdate();
    			
    		},
    		// 文件选择回调
    		onChange(files) {
                uni.showLoading({
                    title:'上传中..'
                })
    			console.log('当前选择的文件列表：',JSON.stringify([...files.values()]));
    			// 更新选择的文件 
    			this.files = files;
    			// 强制更新视图
    			this.$forceUpdate();
    			
    		
    			
    			// ---可删除--演示重新定位覆盖层控件
    			this.$nextTick(()=>{
    				console.log('演示重新定位');
    				this.$refs.lsjUpload0.show();
    				this.$refs.lsjUpload1.show();
    				this.$refs.lsjUpload2.show();
    			});
    			
    		},
    		// 手动上传
    		upload() {
    			// name=指定文件名，不指定则上传所有type等于waiting和fail的文件
    			this.$refs['lsjUpload'+this.tabIndex].upload();
    		},
    		// 指定上传某个文件
    		resetUpload(name) {
    			this.$refs['lsjUpload'+this.tabIndex].upload(name);
    		},
    		// 移除某个文件
    		clear(name) {
    			// name=指定文件名，不传name默认移除所有文件
    			this.$refs['lsjUpload'+this.tabIndex].clear(name);
    		},
    		/**
    		 * ---可删除--演示在组件上方添加新内容DOM变化
    		 * DOM重排演示，重排后组件内部updated默认会触发show方法,若特殊情况未能触发updated也可以手动调用一次show()
    		 * 什么是DOM重排？自行百度去
    		 */
    		add() {
    			this.list.push('DOM重排测试');
    		},
    		/**
    		 * ---可删除--演示Tab切换时覆盖层是否能被点击
    		 * APP端因为是webview，层级比view高，此时若不希望点击触发选择文件，需要手动调用hide()
    		 * 手动调用hide后，需要调用show()才能恢复覆盖层的点击
    		 */
    		onTab(tabIndex) {
    			this.$refs.lsjUpload0.hide();
    			this.$refs.lsjUpload1.hide();
    			
    			this.tabIndex = tabIndex;
    			
    			this.$nextTick(()=>{
    				this.$refs['lsjUpload'+this.tabIndex].show();
    			})
    			
    		},
    		/**
    		 * 打开nvue窗口查看非跟随窗口滚动效果
    		 */
    		open() {
    			
    		}
    	}
    }
    
</script>

<style lang="scss" scoped>
    .bbll{
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        .btn{
            width: 180rpx;
            height: 70rpx;
            border-radius: 10rpx;
            background-color: #2979ff;
            color: #fff;
            text-align: center;
            line-height: 70rpx;
            font-size: 24rpx;
        }
        .tips{
            text-align: center;
            font-size: 22rpx;
        }
    }
</style>